<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="api-app">
<head>
    <meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <!-- 响应式设计 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <!--[if lte IE 8]>
    <script>
        document.createElement('ng-include');
        document.createElement('ng-pluralize');
        document.createElement('ng-view');
        // Optionally these for CSS
        document.createElement('ng:include');
        document.createElement('ng:pluralize');
        document.createElement('ng:view');
    </script>
    <![endif]-->

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

    <link href="../../resources/js/validate/jquery.validate.css" type="text/css" rel="stylesheet"/>
    <script src="../../resources/bootstrap/js/jquery-1.8.2.min.js" type="text/javascript"></script>


    <script src="../../resources/js/validate/jquery.validate.js" type="text/javascript"></script>
    <script src="../../resources/js/validate/jquery.validate.messages.js" type="text/javascript"></script>
    <script src="../../resources/angular/json2.js" type="text/javascript"></script>

    <script src="../../resources/bootstrap/js/bootstrap.js" type="text/javascript"></script>
    <link href="../../resources/bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet"/>
    <link href="../../resources/bootstrap/css/bootstrap-responsive.css" type="text/css" rel="stylesheet"/>

    <script src="../../resources/angular/angular.min.js" type="text/javascript"></script>
    <script src="./JSONFormat.js" type="text/javascript"></script>
    <link href="./style.css" rel="stylesheet" type="text/css"/>
    <!--<script src="./tool.js" type="text/javascript"></script>-->

    <script type="text/javascript" src="./api.js"></script>
</head>
<body ng-controller="AllDocCtrl">
<form id="inputForm">
    <table class="table table-striped table-bordered table-condensed" id="mainTable">
        <tr>
            <th colspan="2" id="thHeader">
                <div class="nav-header">
                    <h4 style="font-size: 24px;">API DOCUMENT</h4>
                </div>
            </th>
        </tr>

        <tr>
            <td class="well" id="tdList">
                <ul id="apiList">
                    <li ng-repeat="api in apiDocList">
                        <a class="pull-left" href="#" ng-click="view(api)">{{api.name}}</a>
                        <span class="pull-right">
                            <i class="icon-edit" ng-click="edit(api)"></i>
                            <i class="icon-minus-sign" ng-click="removeItem(api.id)"></i>
                        </span>
                    </li>
                </ul>
            </td>
            <td class=" well form-inline">
                <table class="table table-striped table-bordered table-condensed">
                    <tr>
                        <th style="width: 100px;">Name</th>
                        <td>
                            <div class="pull-left">
                                <input name="name" ng-show="formData.isEdit" class="span4" ng-model="formData.name"
                                       type="text"/>
                                <span ng-show="!formData.isEdit">{{formData.name}}</span>
                            </div>
                            <div class="pull-right">
                                <button class="btn btn-small" ng-click="test()" type="button">
                                    <i class="icon-flag"></i> TEST
                                </button>
                                <button class="btn btn-small" ng-show="formData.isEdit" ng-click="save()" type="button">
                                    <i class="icon-share"></i> SAVE
                                </button>
                                <button class="btn btn-small" type="button" ng-click="addItem()">
                                    <i class="icon-plus-sign"></i> NEW
                                </button>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th>Action</th>
                        <td>
                            <input ng-show="formData.isEdit" ng-model="formData.url" name="url" class="span6"
                                   type="text"/>
                            <span ng-show="!formData.isEdit">{{formData.url}}</span>
                        </td>
                    </tr>
                    <tr>
                        <th>Method</th>
                        <td>
                            <select ng-show="formData.isEdit" ng-model="formData.method">
                                <option>POST</option>
                                <option>GET</option>
                                <option>PUT</option>
                                <option>DELETE</option>
                            </select>
                            <span ng-show="!formData.isEdit">{{formData.method}}</span>

                        </td>
                    </tr>

                    <tr>
                        <th>
                            DataType
                        </th>
                        <td>
                            <select ng-show="formData.isEdit" ng-model="formData.dataType">
                                <option value="json">JSON</option>
                                <option value="html">HTML</option>
                                <option value="text">TEXT</option>
                            </select>
                            <span ng-show="!formData.isEdit">{{formData.dataType}}</span>
                        </td>
                    </tr>
                    <tr>
                        <th>Data</th>
                        <td>
                            <textarea ng-show="formData.isEdit" ng-model="formData.data" id="dataTextArea" class="span6"
                                      rows="5"></textarea>

                            <div id="dataTextAreaCode" ng-show="!formData.isEdit"></div>
                        </td>
                    </tr>
                    <tr>
                        <th>memo</th>
                        <td>
                            <textarea ng-show="formData.isEdit" ng-model="formData.memo" class="span6"
                                      rows="5"></textarea>

                            <div ng-show="!formData.isEdit">{{formData.memo}}</div>
                        </td>
                    </tr>
                    <tr>
                        <th>Result</th>
                        <td>
                            <div id="codeDiv"></div>
                        </td>
                    </tr>
                </table>

            </td>
        </tr>

    </table>
</form>
</body>
</html>